<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/12/11 0011
  Time: 20:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>


    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width:100%;
            height:46px;
            background-color:lightskyblue;
            box-shadow: 1px 1px 1px #E0E0E0;
            margin-bottom: 2px;
        }
        .box_center{
            width:1200px;
            height: 100%;
            margin: 0 auto;

        }
        a{
            text-decoration:none;
        }

        .box_center_b{
            width:100%;
            height: 45px;

        }
        .box_center_b ul{
            margin-left: 200px;
            text-align: center;

        }
        .box_center_b li{
            list-style:none;
            float:left;
            margin-left:80px;
            color:#666;
            font-family: "微软雅黑";
            font-size: 16px;
            margin-top: 19px;

        }

        .box_center_b a {
            width: 100px;
            height: 28px;
            color: #666;
            text-align: center;
        }
        .box_center_b a:hover {
            cursor:pointer;
            color:#136fb8;
            text-align: center;
            text-decoration: none;
            border-bottom: 1px solid #136fb8;
        }

        .a2{
            float:left;
            line-height: 5px;
        }
        .box1{
            width: 500px;
            height:50px;
            margin: 0 auto;
        }
        .box2{

            width: 300px;
            float: left;
            margin-left: 20px;
            border:1px solid #dddddd;
        }

        .box2 li{
            list-style: none;
            margin-left:80px;
            color:#666;
            font-family: "微软雅黑";
            font-size: 16px;
            margin-top: 20px;
            line-height: 40px;
        }
        .box2 a{
            margin-left:80px;
            color:#666;
            font-family: "微软雅黑";
            font-size: 16px;
            margin-top: 20px;
        }
        .box2_b{
            width: 100%;
            height: 300px;

        }
        .box2_b img{
            margin-top: 20px;
        }
        .box2_bb{
            margin-top: 20px;

        }
        .box2_bb p{
            color: #FF6700;
            line-height: 20px;
            margin-left: 20px;
            margin-top: 20px;
        }
        .box3{
            /*margin-left: -30px;*/
            width: 1000px;
            height:500px;
            /*float: left;*/
        }

        table { border-collapse:collapse; }
        input { font-size:12px; }
        label { display:inline-block; padding-top:1px; }
        label input { border:0; line-height:20px; padding:0px 10px; overflow:visible; color:#fff; }
        label.ui-green input { background:#68a54c; }
        label.ui-blue input { background:#5e77aa; }
        ul { list-style:none; }
        a:link, a:visited { color:#3a52a8; text-decoration:none; }
        a:hover, a:active { color:#3a52a8; text-decoration:underline; }
        .shadow .box { background:#fff; border:1px solid #bfbfbf; padding:5px; margin-right:3px; margin-bottom:3px; }

        .wrap { width:960px; margin:0 auto; }
        #header .help a { margin:0 5px; }
        #header .navbar li a { display:block; word-spacing:5px; letter-spacing:5px; background:url(../images/bg.png) left -30px no-repeat; padding-left:20px; padding-top:4px; line-height:26px; font-size:14px; font-weight:bold; color:#105f4b; text-decoration:none; }
        #header .navbar li.current a { background-position:left top; color:#fff; padding-left:15px; }
        #childNav ul { margin:9px; line-height:14px; }
        #childNav ul li { float:left; display:inline; border-right:1px solid #dc6b04; border-left:1px solid #fba455; padding:0 9px; }
        #childNav ul li a { color:#fff; text-decoration:none; }
        .pager ul { float:right; }
        .pager ul li { float:left; border:1px solid #eee; line-height:18px; padding:0 3px; margin:0 1px; display:inline; }

        .search label input { height:18px; }

        #register .shadow h1 { font-size:24px; background:#e6f5e8; line-height:54px; color:#4c4d4b; padding-left:20px; border-bottom:1px solid #eaeaea; margin-bottom:1px; }
        #register .steps li { float:left; line-height:25px; background-color:#dbdbdb; width:292px; text-align:center; color:#999; }
        #register .steps li em { float:right; display:inline-block; height:25px; background-image:url(../images/bg.png); background-repeat:no-repeat; background-position:-26px -90px; }
        #register .steps li.finished em { width:24px; background-position:-51px -90px; }
        #register .steps li.current em { width:24px; background-position:0 -90px; }
        #register .steps li.last em { width:19px; background-position:-96px -90px; }
        #register .steps li.last-current em { width:19px; background-position:-75px -90px; }
        #register form { clear:both; padding:20px 0; }
        #register form table { width:100%; }
        #register form table td { padding:10px 0; }
        #register form table td span { display:none; vertical-align:middle; margin-left:10px; padding-left:22px; padding-right:10px; background:url(../images/bg.png) -232px -63px no-repeat; }
        #register form label.ui-green input { font-size:18px; font-weight:bold; line-height:32px; height:30px; padding:0 15px; }

        #main .lefter .box { border:1px solid #c3c3c3; }
        #main .lefter h2 { background:#fff0d9; font-size:14px; color:#853200; padding:2px 8px; }
        #main .lefter .box dl dt { color:#404040; font-weight:bold; background:#fafafa; padding:2px 10px; }
        #main .lefter .box dl dd a { color:#666; }
        #main .lefter .last-view dl { margin:5px; }
        #main .lefter .last-view dl dt { float:left; width:60px; height:60px; text-align:center; }
        #main .lefter .last-view dl dt img { border:1px solid #ccc; }
        #main .lefter .last-view dl dd { height:60px; margin-left:66px; }
        #main .lefter .last-view dl dd a { color:#666; }
        #main .main h1,
        #main .right-main h1 { padding:0 10px; font-size:18px; line-height:50px; border-bottom:1px dashed #cfcfcf; }

        ul.product li dl dd.title a { color:#666; }
        ul.product li dl dd.price { color:#c30; font-weight:bold; }

        .product-list ul.product li { width:172px; height:240px; line-height:22px; font-size:14px; overflow:hidden; }
        .product-list ul.product li dl dt img { width:170px; height:170px; border:1px solid #ccc; }

        #chater dl dd { text-align:center; }
        .guestbook ul li dl { line-height:28px; }
        .guestbook ul li dl dt { padding:0 20px; font-size:14px; font-weight:bold; color:#666; background:#fafafa; }
        .guestbook ul li dl dd { padding:0 20px; color:#666; }
        .guestbook ul li dl dd.author em { float:right; font-style:normal; }

        #reply-box table td { padding:5px 0; }
        #reply-box table td textarea { border:1px solid #ccc; width:320px; height:80px; padding:4px 6px; }

        #product .infos .thumb { float:left; width:320px; text-align:center; }
        #product .infos .buy .price { color:#c00; font-weight:bold; font-size:24px; }
        #product .infos .buy .button { border:1px solid #ffefd2; padding:10px; background:#fff8e7; margin:20px auto; text-align:center; }

        #shopping table { width:100%; line-height:24px; border-top:2px solid #dfc9b2; border-bottom:2px solid #dfc9b2; }
        #shopping table th { background:#f7f4eb; color:#8a7152; }
        #shopping table td { padding:10px 0; border-top:1px solid #dfc9b2; }
        #shopping table td.thumb img { border:1px solid #dfdfe0; margin:0 10px; vertical-align:middle; }
        #shopping table td.price,
        #shopping table td.number { text-align:center; width:100px; border-left:1px solid #e1e1e1; }
        #shopping table td.price { color:#cc3300; font-weight:bold; }
        #shopping table td.delete { width:60px; text-align:center; border-left:1px solid #e1e1e1; }
        #shopping table td.number dl { width:80px; margin:0 auto; }
        #shopping table td.number dl dt { float:left; display:inline; width:25px; text-align:center; margin:0 4px; }
        #shopping table td.number dl dt input { width:20px; border:1px solid #c9c9c9; padding:2px; text-align:center; }
        #shopping table td.number dl dd { float:left; width:28px; margin:3px 0; text-align:center; line-height:20px; height:19px; overflow:hidden; border:1px solid #c9c9c9; cursor:pointer; }
        #shopping .button { text-align:right; padding:10px 0; }

        #chat-room .lefter h2 { background:#fafafa; border-bottom:1px solid #eee; font-size:14px; line-height:24px; text-align:center; }
        #chat-room .lefter ul li { line-height:24px; padding:10px; }
        #chat-room .righter .reply label { vertical-align:middle; }

        .manage .list th { background:#f7f4eb; color:#8a7152; }
        .manage .list td { padding:5px; border-top:1px solid #dfc9b2; }
        .manage .list td { border-left:1px solid #e1e1e1; }
        .manage .list td.thumb img { border:1px solid #dfdfe0; margin:0 10px; vertical-align:middle; }
        .manage .form td { padding:5px 2px; }
        .manage .form td textarea { width:400px; border:1px solid #ccc; padding:4px; height:80px; }

        #menu-mng dl dd{ margin:5px auto; }
        #menu-mng dl dd a { display:block; }
        #menu-mng em { float:right; padding:0 5px; font-style:normal; }

    </style>
</head>
<body>
<div class="box">
    <div class="box_center">
        <a href="index" style="line-height: 45px;float: left">返回</a>
    </div>
</div>
<%--<div class="box1">--%>
<%--    <form style="text-align: center;" method="post" action="">--%>
<%--        <input style="height: 25px;margin-top: 10px; width: 200px;" id="bookname" type="text" value="请输入书名"/>--%>
<%--        <input type="submit" value="搜索"/>--%>
<%--    </form>--%>

<%--</div>--%>
<%--<div class="box2">--%>
<%--&lt;%&ndash;    <ul>&ndash;%&gt;--%>
<%--&lt;%&ndash;        &lt;%&ndash;<a href="list?id=1" class="a_book" id="">111</a>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;        <c:forEach items="${titl}" var="item">&ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="list?catalogId=${item.catalogId}" class="a_book"><li>${item.catalogName}</li></a>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </c:forEach>&ndash;%&gt;--%>

<%--&lt;%&ndash;    </ul>&ndash;%&gt;--%>
<%--&lt;%&ndash;    <div class="box2_b">&ndash;%&gt;--%>
<%--&lt;%&ndash;        <img src="img/index_14.gif" />&ndash;%&gt;--%>
<%--&lt;%&ndash;        <div class="box2_bb">&ndash;%&gt;--%>
<%--&lt;%&ndash;&lt;%&ndash;            <p>在圣诞来临之际</p>&ndash;%&gt;&ndash;%&gt;--%>
<%--&lt;%&ndash;            <p>本书店为答谢新老朋友</p>&ndash;%&gt;--%>
<%--&lt;%&ndash;            <p>特举办购物有奖活动</p>&ndash;%&gt;--%>
<%--&lt;%&ndash;            <p>购物有奖，快快行动吧！</p>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>

<%--&lt;%&ndash;    </div>&ndash;%&gt;--%>

<%--</div>--%>
<div class="box3" style="margin: 0 auto">
    <div class="wrap">
        <div id="shopping">
            <form action="shopresult">
                <table>
                    <tr>
                        <th><input type="checkbox" id="all" onclick="check()"/>全选</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach var="list" items="${list}">
                        <tr id="product_id_1">
                            <th><input type="checkbox"  name="book"/></th>
                            <td class="thumb"><img src="${list.picture}" /><a href="">${list.bookName}</a></td>
                            <td class="price" id="price_id_1">
                                <span>￥${list.price}</span>
                                <input type="hidden" value="99" />
                            </td>
                            <td class="number">
                                <dl>
                                    <dt><input id="${list.orderId}" type="text" name="number" value="${list.quantity}" /></dt>
                                    <dd style="font-size: 12px" onclick="changeQuantity(this);">修改</dd>
                                </dl>
                            </td>
                            <td class="delete"><a href="/deleteOrder?orderId=${list.orderId}">删除</a></td>
                        </tr>
                    </c:forEach>

                </table>
                <div class="button"><input type="submit" value="" /></div>

                <button style="float: right" class="layui-btn">结算</button>
            </form>
        </div>

    </div>
</div>
<script>
    function check() {
        var choce=document.getElementsByName('book');
        for (var i=0;i<choce.length;i++)
        {
            choce[i].checked=document.getElementById('all').checked;
        }
    }
    function changeQuantity(obj){
        console.log(obj)
        var input=$(obj).parent().find("input");
        var quantity=$(input).val()
        var orderId=$(input).attr("id")
        console.log(orderId+"  "+quantity)
        window.location.href="/changeQuantity?orderId="+orderId+"&quantity="+quantity
    }
</script>
</body>
</html>
